{include file="common/head"/}
<style>
  .aui-bar-nav{background:white;}
  .aui-bar-nav .aui-btn .aui-iconfont{color:black;}
  body{background:#ffffff;}
  .aui-bar-nav .aui-title{color:black;}
  h1{font-weight:600;font-size:2rem;color:#17204d}
  .title{background:#EBEBEB; height:5rem;border-radius:10px;padding:10px;color:white;line-height:2rem;}
  .title p{font-size:0.8rem;}
  .title p:nth-child(1){color:#E34540}
  .title p:nth-child(1) span{font-size:1.2rem;font-weight:bold;}
 
  .t_content{background:#4871FC;border-radius:5px;height:4rem;padding:10px;box-sizing:border-box;}
  .team p{color:white;}
  h2{font-weight:bold;margin:10px 0;}

  .accu p{white-space:nowrap;}
  .accu div{line-height:2rem;}
  .accu div div{box-shadow: 0px 2px 12px #dedede;
    border-radius: 5px;
    margin: 6px;
    padding: 5px 10px;}
  
  .aui-col-xs-4{color:black;font-weight:bold;}
  
  
   .mask{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none}
   .form, .pay{width:80%;min-height:30%;height:auto;margin:auto;margin-top:20%;background:white;display:none;}
   
   
   .aui-list-item-inner{padding:1rem 0 !important;}
   .form .aui-list img{height:20px;width:auto;display:inline;vertical-align:middle;}
   .pay .aui-list img{height:20px;width:auto;display:inline;vertical-align:middle;}
   
   .aui-radio:checked{background-color: #16bb02;}
   
   label{width:90%;}
   .aui-radio{float:right;}
</style>
<body>
   <header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined" href='javascript:history.go(-1);'>
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title"></div>
    <a class="aui-pull-right aui-btn aui-btn-outlined"  href='index.html'>
        <span class="aui-iconfont aui-icon-home"></span>
    </a>
  </header>
<div class='aui-content aui-content-padded'>
  <h1>Withdraw</h1>
  
 <div class='aui-row aui-row-padded accu'>
     
     <div class='aui-col-xs-12' onclick='withdraw();'>
	    <div class='aui-row'>
	     <p class='aui-col-xs-4'>提币地址</p>
	     <p class='aui-col-xs-6'><input type='text' readonly placeholder='请输入提币地址' id='bank_info' /></p>
	     <p class='aui-col-xs-2' align=right ><i class="aui-iconfont aui-icon-plus"></i></p>
		</div>
	 </div>
	 
	 <div class='aui-col-xs-12'>
	    <div class='aui-row'>
	     <p class='aui-col-xs-4'>提币金额</p>
	     <p class='aui-col-xs-6'><input type='number' placeholder='请输入提币金额' id='count' /></p>
	     <p class='aui-col-xs-2' style='color:black;' onclick='withdraw_all({$user.money})'>全部</p>
		</div>
	 </div>
	 
	 <div class='aui-col-xs-12'>
	    <div class='aui-row'>
	     <p class='aui-col-xs-4'>可用</p>
	     <p class='aui-col-xs-8' id='money'>{$user.money} F</p>
		</div>
	 </div>
	 
 </div> 
   <div class='aui-row' align=center>
	  <div class="aui-btn aui-btn-block aui-btn-info" style='width:80%;' onclick='confirm_withdraw()'>确认提币</div>
  </div>
  
</div>



<div class='mask'>
   <div class='form'>
       <div class="aui-content aui-margin-b-15">
         <div class='aui-row' style='line-height:2rem;text-align:center;'>
		      <div class='aui-col-xs-2' onclick='close_win()'><i class="aui-iconfont aui-icon-close"></i></div>
		      <div class='aui-col-xs-10' align=left style='line-height:2rem;color:#16bb02;font-weight:bold;'> <b>Change Payment Method</b></div>
		 </div>
		 
		 <ul class="aui-list aui-form-list">
		   {volist name='cards' id='vo'}
		     <li class="aui-list-item">
				<div class="aui-list-item-inner">
					<label ><div class='aui-col-xs-12'>
						{$vo.title}({$vo.no|fmt_no1})
					    <input class="aui-radio" data-val='{$vo.title}({$vo.no|fmt_no1})' type="radio" value='{$vo.id}' name="card_id" >
					</div>
					</label>
				</div>
			 </li>
		   {/volist}
		 </ul>
		 
		 <ul class="aui-list aui-form-list">
		     <li class="aui-list-item" style='line-height:2rem;font-weight:bold;' onclick='location.href="{:url('add_to')}"'>Pay with New Card</li>
	     </ul>
		 
	   </div>
   </div>
   
   <div class='pay'>
       <div class="aui-content aui-margin-b-15">
          <div class='aui-row' style='line-height:2rem;text-align:center;'>
		     <div class='aui-col-xs-2' onclick='close_win()'><i class="aui-iconfont aui-icon-close"></i></div>
		     <div class='aui-col-xs-7' align=left><b>Verify fingerprint</b></div>
		     <div class='aui-col-xs-3' style='color:#2a76d4'>Password&nbsp;</div>
		  </div>
		  
		 <h2 align=center>提现</h2>
		 <ul class="aui-list aui-form-list">
			 <li class="aui-list-item">
				 <input type="text" id='coin_count' readonly>
			 </li>
			 <li class="aui-list-item" style='line-height:2rem;'>
			   <div class='aui-col-xs-3' id='bank_icon'>
				<!--<img src='__HOME__/images/ccb.jpg' />-->
				地址：
			   </div>
			   <div class='aui-col-xs-9' id='bank_detail'>
			     
			   </div>
			 </li>
			 <li class="aui-list-item" style='line-height:2rem;'>
			   <div class='aui-col-xs-3'>
				 密码：
			   </div>
			   <div class='aui-col-xs-9'>
			     <input type="text" placeholder="请输入密码" value='' id='pwd'>
			   </div>
				 
			 </li>
		 </ul>
		  <ul class="aui-list aui-form-list">
		     <li class="aui-list-item">
			     <div class="aui-btn aui-btn-info" style='margin:auto;' onclick='finish();'>确定提币</div>
			 </li>
	     </ul>
	   </div>
   </div>
</div>
<input type='hidden' id='bank_id' value='' />

{include file="common/footer"/}
<script type="text/javascript">
    var toast = new auiToast({});
    var dialog = new auiDialog({});
    var tab = new auiTab({
        element:document.getElementById("tab"),
        index:1,
        repeatClick:false
    },function(ret){
        console.log(ret);
    });
	
	$(function(){
		$("[name='card_id']").each(function(){
		    $(this).click(function(){
			    var v = $(this).val();
				var s = $(this).attr('data-val');
				$("#bank_id").val(v);
				$("#bank_info").val(s);
				$("#bank_detail").text(s);
				$(".form").hide();
				$(".mask").hide();
				
			})
		})
	})
	
	function withdraw(){
	    $(".mask").show();
		$(".form").show();
	}
	
	function close_win(){
	    $(".mask").hide();
		$(".form").hide();
		$(".pay").hide();
	}
	
	function withdraw_all(v){
	    $("#count").val(v.toFixed(4));
	}
	
	function confirm_withdraw(){
	    if($("#bank_detail").text() == ''){
		   toast.fail({title:"请输入提币地址",duration:1000});
		   return;
		}
		
		if($("#count").val() == ''){
		   toast.fail({title:"请输入提币金额",duration:1000});
		   return;
		}
		
		if($("#count").val() > ({$user.money}).toFixed(4)){
		    toast.fail({title:"没有足够的金额",duration:1000});
		   return;
		}
	
	
	    $("#coin_count").val("提币个数："+$("#count").val());
	    $(".form").hide();
		$(".mask").show();
		$(".pay").show();
	}
	
	function finish(){
	    if($("#pwd").val() == ''){
		   toast.fail({title:"请输入密码",duration:1000});
		   return;
		}
	
	    dialog.alert({
			title:"提示",
			msg:'确定提币？',
			buttons:['取消','确定']
		},function(ret){
			if(ret.buttonIndex == 2){
			    $(".mask").hide();
				$(".form").hide();
				$(".pay").hide();
			    $.post('{:url("apply_withdraw")}', {"bank_id":$("#bank_id").val(), 'pwd':$("#pwd").val(), 'count':$("#count").val()}, function(data){
				    data = JSON.parse(data);
					if(data.error == 0){
					    alert('提交成功，待审核!');
					    location.reload()
					}else{
					    alert(data.msg);
					    location.reload()
					}
				});
			}
		})
	}
</script>
</body>
</html>